出处：掘金

原作者：ErpanOmer

First Contentful Paint (FCP) 是 Web 性能优化中的关键指标之一，表示浏览器从用户输入 URL 到渲染页面首个内容的时间。一个良好的 FCP 体验不仅能提升用户对网站的第一印象，还能增强 SEO 表现和转化率

本文将从 FCP 的定义、测量方法到优化技巧展开探讨，并通过代码实例直观展示如何优化 FCP

什么是 FCP

FCP 表示页面内容首次渲染的时间，主要关注以下元素：

• 文本
• 图像
• Canvas 元素
• SVG 等

FCP 是用户感知性能的重要组成部分，直接影响用户对加载速度的主观体验。FCP 越快，用户越容易留下良好的第一印象

FCP 测量方法

Chrome 开发者工具

1. 打开 Chrome 开发者工具 (F12)，选择"Performance"选项卡
2. 点击 "Record"，然后加载页面
3. 在时间轴中查看"First Contentful Paint"标记

Lighthouse

Lighthouse 是 Google 提供的一站式性能检测工具，可生成详细的 FCP 数据：

1. 打开 Chrome 开发者工具，选择"Lighthouse"选项卡
2. 点击"Generate Report"，查看 FCP 相关数据和优化建议

JavaScript 获取 FCP

使用 PerformanceObserver API 捕获 FCP 时间：

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntriesByName('first-contentful-paint');
  if (entries.length) {
    console.log('FCP:', entries[0].startTime, 'ms');
  }
});

observer.observe({ type: 'paint', buffered: true });

优化 FCP 的核心策略

减少阻塞渲染的资源

阻塞渲染的资源（如 CSS 和 JavaScript）会显著延迟 FCP。通过以下方式优化：

• 延迟加载非关键资源：使用 defer 或 async 属性加载脚本，<script src="non-critical.js" defer></script>
• 内联关键 CSS：将关键 CSS 直接嵌入 HTML 中，避免额外的网络请求

使用 Content Delivery Network (CDN)

CDN 可以减少资源的加载延迟，提高静态资源的传输速度。例如，通过 Cloudflare 配置静态资源缓存：

location /static/ {
    expires 30d;
    add_header Cache-Control "public";
}

优化图片加载

• 选择合适的图片格式：优先使用现代格式（如 WebP）
• 延迟加载非首屏图片：使用 loading="lazy" 属性延迟加载，<img src="large-image.jpg" alt="Example" loading="lazy">

启用 HTTP/2 或 HTTP/3

通过 HTTP/2 多路复用功能，可以并行加载多个资源，减少阻塞时间。在 Nginx 中启用 HTTP/2：

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
}

优化字体加载

未正确加载的字体会阻塞文本渲染，导致 FCP 延迟。以下是优化字体加载的步骤：

1. 使用现代格式（如 WOFF2）
2. 加入字体加载显示策略：<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

优化前后对比案例

案例背景

某内容网站首页加载时间较慢，FCP 为 2.8 秒，导致跳出率较高。通过以下优化策略，显著提升性能

优化步骤

1. 内联关键 CSS，减少 CSS 阻塞
2. 延迟加载非关键 JavaScript
3. 启用 HTTP/2，减少网络请求延迟
4. 使用 WebP 替代传统图片格式，减少图片体积

优化结果

优化前：

• FCP：2.8 秒
• 页面加载时间：5.4 秒
• 跳出率：40%

优化后：

• FCP：1.2 秒
• 页面加载时间：3.1 秒
• 跳出率：22%

总结

优化 FCP 是提升用户体验的关键步骤。通过减少阻塞资源、优化图片加载、启用现代网络协议等手段，可以显著提升网站性能和用户满意度。希望本文的代码示例和案例能帮助您更好地理解和优化 FCP，让您的网站性能更上一层楼！